<template>
  <div class="set-items">
    <dl>
      <dt><a href="javascript:;" @click="toPreview">预览</a></dt>
    </dl>
    <NameSet ref="vNameSet" />
    <DpiSet />
    <DocsAttachmentSet />
    <div v-show="!hasDocsAttachment">
      <BackgroundSet />
      <dl>
        <dt>控件增加</dt>
        <dd :class="$style.addControl" @click="addControl">
          <a data-type="1" href="javascript:;">图片</a>
          <a data-type="2" href="javascript:;">幻灯片</a>
          <a data-type="3" href="javascript:;">文本</a>
          <a data-type="4" href="javascript:;">滚动文字</a>
          <a data-type="5" href="javascript:;">视频</a>
          <a data-type="6" href="javascript:;">当前日期时间</a>
          <a data-type="7" href="javascript:;">天气</a>
          <a data-type="8" href="javascript:;">倒计时</a>
          <a data-type="9" href="javascript:;">web 控件</a>
        </dd>
      </dl>
      <dl v-show="hasSelected">
        <dt>控件属性 <VButtonSmall s="red" @click="() => { dataApi.activeIndex = -1 }">取消选择</VButtonSmall></dt>
        <dd>
          <SetControlItem />
        </dd>
      </dl>
    </div>
    <div>
      <VButtonCenter @click="onSave">保存</VButtonCenter>
    </div>
    <!-- <ExportImg ref="vExportImg"/> -->
  </div>
</template>

<script>
import dataApi from '@/view/data-api-edit'
import ajaxApi from '@/view/ajax-api/index.js'
import SetControlItem from '@/view/SetControlItem'
import VButtonCenter from '@/view/comm/VButtonCenter'
import VButtonSmall from '@/components/buttons/VButtonSmall'
import BackgroundSet from './BackgroundSet'
import DpiSet from './DpiSet'
import NameSet from './NameSet'
import DocsAttachmentSet from './DocsAttachmentSet'
// import ExportImg from '../export-img'
export default {
  components: {
    VButtonSmall,
    VButtonCenter,
    SetControlItem,
    BackgroundSet,
    DpiSet,
    NameSet,
    DocsAttachmentSet
    // ExportImg
  },
  computed: {
    dataApi () {
      return dataApi
    },
    hasSelected () {
      return dataApi.activeIndex > -1
    },
    hasDocsAttachment () {
      return dataApi.core.docsAttachment.list.length > 0
    }
  },
  methods: {
    addControl ({ target }) {
      switch (target.dataset.type) {
        case '1':
          dataApi.addImageControl()
          break
        case '2':
          dataApi.addViewControl()
          break
        case '3':
          dataApi.addTextControl()
          break
        case '4':
          dataApi.addRollTextControl()
          break
        case '5':
          dataApi.addVideoControl()
          break
        case '6':
          dataApi.addCurrentDateControl()
          break
        case '7':
          dataApi.addWeatherControl()
          break
        case '8':
          dataApi.addCountdownControl()
          break
        case '9':
          dataApi.addWebControl()
          break
      }
    },
    toPreview () {
      dataApi.preview = true
    },
    onSave () {
      let core = dataApi.core
      let err
      if (this.$refs.vNameSet.err) {
        this.$toast.error('名称不能超过20个字符')
        err = 1
      }
      if (err) return

      // this.$refs.vExportImg.getImg().then(previewUrl => {
      ajaxApi.save(core).then(() => {
        if (ajaxApi.id === '0') {
          this.$toast.success('新增成功')
        } else {
          this.$toast.success('编辑成功')
        }
        setTimeout(() => {
          location.href = '/SchoolCulture/List'
        }, 300)
      })
      // })
    }
  }
}
</script>

<style scoped>
.set-items >>> {
  dt {
    margin: 6px 4px;
    font-size: 18px;
    font-weight: bold;
  }
  dd {
    font-size: 14px;
    margin: 0;
  }
  .m1 {
    margin: 6px 4px;
  }

  .set-item{
    background-color: #eee;
    padding: 4px 6px;
    border-bottom: 1px solid #ddd;
    /* .tit {

    } */
    .it {
      padding-top: 5px;
    }
  }
  .set-item.b-top {
    border-top: 1px solid #ddd;
  }
}
</style>

<style module>
.addControl {
  margin: 6px 4px 2px!important;
}
.addControl a{
  display: inline-block;
  border: 1px solid #25a2c7;
  text-decoration: none;
  margin-bottom: 4px;
  padding: 0px 2px;
  &:hover{
    border-color: red;
  }
  &:active {
    border-color: red;
  }
}
</style>
